<template>
    <CommonLayout>
    <template #header>
      用户添加
    </template>

    <template #main>
      <div class="main-content">
        <UserForm 
            :user="newUser" 
            @submit="handleSubmit" 
         />
      </div>
    </template>
</CommonLayout>
  </template>

<script>
import UserForm from '../Component/UserForm.vue';// 引入用户表单组件
import CommonLayout from '../Component/ManagePage.vue'; // 引入母板组件

export default {
  components: {
    UserForm,
    CommonLayout, // 注册母板组件
  },
  data() {
    return {
      sidebarVisible: true, // 控制侧边栏显示与否
      alertMessage: '', // 提示信息
      newUser: {
      id: 0,
      userName: "",
      password: "",
      phone: "",
      roleId: 0,
      email: "",
      },// 新增用户信息
    };
  },
  methods: {
  handleSubmit(user) {
    // 处理用户数据，可能发送给后端或更新状态
    console.log('Submitted user:', user);
    // 你可以在这里添加逻辑以处理成功或失败的情况
  },
  handleClose() {
    // 处理关闭操作
    console.log('Form closed');
  }
},

}
</script>

<style>
.main-content {
  padding: 10px;
  overflow-y: auto; /* 增加垂直滚动条 */
}

.main {
  margin-top: 10px; /* 主内容与上方内容间隔 */
}

.button-container {
  margin-bottom: 10px; /* 按钮与表格之间的间隔 */
}

.el-table {
  width: 100%; /* 表格宽度自适应 */
}
</style>